<template>
  <div v-for="(urlobj,url) in urls" :key="url" style="padding:0 20px">
    <div v-for="methodObj,method in urlobj" :key="method" class="block method-line">
      <div :class="method">
        <span class="method">{{method}} </span>
        <span>
          <a-typography-paragraph :copyable="{ tooltips: false }" style="margin-bottom:0">
            {{url}}
          </a-typography-paragraph>
        </span>
        <span class="description">
          {{methodObj.summary}}
        </span>
        <div class="right-operation">
          <a-space>
            <a-button type="primary" ghost size="small" @click="openGenObj(methodObj.parameters,method,url,methodObj.summary,methodObj.responses)">
              生成代码
            </a-button>
            <a-button type="primary" size="small" style="margin-right:10px"
              @click="openCurrentObj(methodObj.parameters,method,url)">
              <DeploymentUnitOutlined />
            </a-button>
            <DownOutlined v-if="!(openKeys.indexOf(url) > -1)" @click="openKeys.push(url)" />
            <UpOutlined v-if="openKeys.indexOf(url) > -1" @click="openKeys.splice(openKeys.indexOf(url),1)" />
          </a-space>
        </div>
      </div>
      <!-- 返回参数 -->
      <div class="method" v-if="openKeys.indexOf(url) > -1">
        <div class="parameters">
          <div class="parameters-title">请求参数</div>
          <div class="param-line">
            <span>名称</span>
            <span>描述</span>
          </div>
          <hr />
          <div v-for="(param,index) in  methodObj.parameters" :key="index">
            <div class="param-line">
              <span :class="{required: param.required}" style="width:30%"> {{param.name}} <span
                  class="param-type">{{param.type && `(${param.type})`}}</span></span>
              <span style="width:70%">
                {{param.description}}
                <div v-if="param.schema && param.schema.originalRef">
                  <div>类型：{{definitions[param.schema.originalRef].type}}</div>
                  <div>
                    参数示例：
                  </div>
                  <RefTable :properties="definitions[param.schema.originalRef].properties" :definitions="definitions" />
                </div>
              </span>
            </div>
          </div>
        </div>
        <!-- 响应 -->
        <div class="response">
          <div class="parameters-title">响应参数</div>
          <div class="param-line">
            <span>名称</span>
            <span>描述</span>
          </div>
          <hr>
          <div v-for="(response,code) in  methodObj.responses" :key="code">
            <div class="param-line">
              <span style="width:30%">{{code}}</span>
              <span style="width:70%">
                {{response.description}}
                <div>
                  参数示例:
                </div>
                <RefTable v-if="response.schema && response.schema.originalRef"
                  :properties="definitions[response.schema.originalRef].properties" :definitions="definitions" />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- POSTMAN -->
  <PostMan v-model:visible="visible" :requireParams="requireParams" :requireMethod="requireMethod" :title="currentUrl"
    :method="requireMethod" :url="currentUrl" />

  <!-- 代码生成弹窗 -->
  <GenCode v-model:visible="genCodeVisible" :requireParams="requireParams" :requireMethod="requireMethod"
    :gtitle="`${currentUrl}代码生成`" :method="requireMethod" :url="currentUrl" :summary="currentSummary" :response="currentResponses"/>
</template>
<script lang="ts">
import Tabs from "@/components/Layout/Tabs.vue";
import { defineComponent, ref } from "vue";
import RefTable from "./RefTable.vue";
import GenCode from "./GenCode.vue";
import PostMan from "./PostMan.vue";
import useVisible from "../../../hooks/visible/useVisible";
import {
  DownOutlined,
  UpOutlined,
  DeploymentUnitOutlined,
} from "@ant-design/icons-vue";
import { useBatchGenCode, useGenCode } from "../hooks/useGenCode";
export default defineComponent({
  components: {
    Tabs,
    RefTable,
    PostMan,
    GenCode,
    DownOutlined,
    UpOutlined,
    DeploymentUnitOutlined,
  },
  props: {
    urls: {
      default: () => ({}),
      type: Object,
    },
    definitions: {
      default: () => ({}),
      type: Object,
    },
  },
  setup() {
    const openKeys = ref([]);

    const { open, visible, close } = useVisible();

    // 当前请求的参数
    const requireParams = ref([]);
    const requireMethod = ref("");
    // 当前请求的URL
    const currentUrl = ref("");
    const currentSummary = ref("");
    // 当前请求的响应参数
    const currentResponses = ref([])

    function openCurrentObj(obj: [], method: string | number, url: string) {
      requireParams.value = obj;
      requireMethod.value = method as string;
      currentUrl.value = url;

      open();
    }

    //生成代码弹窗
    const { genCodeVisible } = useGenCode();

    function openGenObj(obj: [], method: string| number, url: string, summary: string, responses: []) {
      requireParams.value = obj;
      currentResponses.value = responses;
      requireMethod.value = method;
      currentUrl.value = url;
      currentSummary.value = summary;
      genCodeVisible.value = true;
    }

    const { genBatchCodeVisible } = useBatchGenCode();

    return {
      openKeys,
      open,
      visible,
      close,
      requireParams,
      openCurrentObj,
      currentUrl,
      requireMethod,
      genCodeVisible,
      openGenObj,
      genBatchCodeVisible,
      currentSummary,
      currentResponses,
    };
  },
});
</script>
<style lang="less" scoped>
@get: #ebf3fb;
@post: #e8f6f0;
@delete: #fae7e7;
@put: #fbf1e6;

@getBg: #61affe;
@postBg: #49cc90;
@deleteBg: #f93e3e;
@putBg: #fca130;

.mixin-w-h {
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-weight: 600;
  font-size: 18px;
  padding-left: 15px;
  border: 1px solid #89bf04;
  border-radius: 2px;

  display: flex;
  align-items: center;

  .method {
    display: block;
    width: 80px;
    height: 30px;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    border-radius: 4px;
  }

  .description {
    font-size: 16px;
    margin-left: 15px;
    font-weight: 500;
  }
}

.get {
  background-color: @get;
  .mixin-w-h;
  .method {
    background-color: @getBg;
  }
}

.post {
  background-color: @post;
  .mixin-w-h;
  .method {
    background-color: @postBg;
  }
}

.delete {
  background-color: @delete;
  .mixin-w-h;
  .method {
    background-color: @deleteBg;
  }
}

.put {
  background-color: @put;
  .mixin-w-h;
  .method {
    background-color: @putBg;
  }
}

.parameters,
.response {
  margin-top: 10px;
  padding: 0 15px;
  .parameters-title {
    font-size: 18px;
  }

  .param-line {
    display: flex;
    justify-content: flex-start;
    // width: 500px;
    font-weight: 700;
    color: #3b4151;
    margin-top: 5px;

    .required::after {
      content: " * required ";
      color: #ff0000;
      font-weight: 600;
    }

    .param-type {
      font-weight: 500;
    }
  }
}

// .parameters {
//   margin-bottom: 15px;
//   border: 1px solid #89bf04;
// }

.block {
  margin-bottom: 15px;
}

.method-line {
  position: relative;
  .right-operation {
    position: absolute;
    right: 10px;
    .anticon {
      cursor: pointer;
    }
  }
}
</style>